<template>
  <div>
    <el-dialog
        title="提示"
        :visible.sync="value"
        width="30%"
        >
        
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="菜单名称" prop="title">
    <el-input v-model="ruleForm.title"></el-input>
  </el-form-item>
  <el-form-item label="菜单name" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="路由" prop="path">
    <el-input v-model="ruleForm.path"></el-input>
  </el-form-item>
  <el-form-item label="组件路径" prop="component">
    <el-input v-model="ruleForm.component"></el-input>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
  </el-form>
        
   
    </el-dialog>
</div>
</template>

<script>
import axiosEl from '@/utils/axios';
export default {
    props:{
        value:{
            type:Boolean,
            default:false
        },
        currentData:Object,
        action:Object
    },
    data(){
        return {
            ruleForm:{
                title:''
            },
            rules:{
                title: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' },
                    { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入菜单name', trigger: 'blur' },        
                ],
                path: [
                    { required: true, message: '请输入路径', trigger: 'blur' }, 
                ],
                component: [
                    { required: true, message: '请输入组件', trigger: 'blur' },
                   
                ],
            }
        }
    },
    methods:{
        submitForm(formName) {
          
            this.$refs[formName].validate((valid) => {
                if (!valid) return
                this.currentData.parentId = this.currentData.parentId || '';
                axiosEl({
                        method:'post',
                        url:this.action.url,
                        data:this.ruleForm
                    }).then((res)=>{
                        this.$emit('input', false);
                        console.log('添加成功');
                        this.resetForm('ruleForm')
                        
                    })
                    
                    
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }

     
    },
    watch:{
        currentData:{
            deep:true,
            immediate:true,
            handler(newVal,oldVal){
                
                this.ruleForm = newVal;
                
            }
        }
    }
}
</script>

<style>

</style>